.jui {
  
  // Form controls (Text, Number, Date)
  // -------------------------
  
  // Shared size and type resets
  .input {
    display: inline-block;
    text-align: left;
    vertical-align: middle;
    .border-radius(4px);
    .box-sizing(border-box);
    
    // color & size
    .input-gray;
    .input-normal;
  }

  // Textarea Setting
  textarea.input {
     padding: 5px;
     height: auto;
  }

  // INPUT COLORS
  // -----------
  
  .input-gray {
    background-color: #fff;
    border: 1px solid #c8c8c8;
  	.box-shadow("0 4px 5px -5px rgba(0,0,0,0.3) inset");
    color: #333333;
  
    &:focus {
      border-color: #b08bfc;
      outline: 0;
      .box-shadow(~"inset 0 4px 5px -5px rgba(0,0,0,0.3), 0 0 1px 1px rgba(136,74,228,.095)");
      .transition(~"border linear .2s, box-shadow linear .2s");
    }
  }
  
  .input-black {
  	background-color: #444444 !important;
  	border: 1px solid black !important;
    .box-shadow("0 1px 6px #121212 inset") !important;
    color: #FFFFFF !important;
    text-shadow: 0px 1px 0 rgba(0,0,0,0.5) !important;
    
    &:focus {
    	background-color: #ffffff !important;
    	color: #333333 !important;
    }
    
    &:disabled {
    	background-color: #656565 !important;
    	color: #b2b2b2 !important;
    }
  }
  
  // INPUT ETC
  // -----------
  
  .input[disabled], .input[readonly] {
    cursor: not-allowed;
    background-color: #eee;
  }
  
  .input:focus:invalid { 
    color: #b94a48;
    border-color: #ee5f5b;
    
    &:focus {
      border-color: darken(#ee5f5b, 10%);
      @shadow: 0 0 6px lighten(#ee5f5b, 20%);
      .box-shadow(@shadow);
    }
  }
  
  // INPUT SIZES
  // -----------

  .input-normal {
    font-size: 14px;
    padding: 4px 8px;
    height: 28px;
  }

  .input-large {
    font-size: 16px !important;
    padding: 9px 10px !important;
    height: 38px !important;
  }
  
  .input-small {
    font-size: 12px !important;
    height: 24px !important;
  }
  
  .input-mini {
    font-size: 12px !important;
    height: 22px !important;
  }
  
  // INPUT ANGULAR
  // -----------
  .input-rect {
    .border-radius(0) !important;
  }
}
